@property --_ {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --space-0 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0rem;
}
@property --space-4 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0.25rem;
}
@property --space-8 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0.5rem;
}
@property --text-lg {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 1.1rem;
}
@property --text-md {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 1rem;
}
@property --text-sm {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0.75rem;
}
@property --text-xl {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 1.5rem;
}
@property --text-xs {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0.625rem;
}
@property --space-12 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0.75rem;
}
@property --space-16 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 1rem;
}
@property --space-20 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 1.25rem;
}
@property --space-24 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 1.5rem;
}
@property --space-28 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 1.75rem;
}
@property --space-32 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 2rem;
}
@property --space-40 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 2.5rem;
}
@property --space-48 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 3rem;
}
@property --space-56 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 3.5rem;
}
@property --space-64 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 4rem;
}
@property --space-80 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --space-96 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text-2xl {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 2rem;
}
@property --text-3xl {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 2.5rem;
}
@property --text-4xl {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 3rem;
}
@property --space-120 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text-base {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0.875rem;
}
@property --radius-full {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --radius-large {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --radius-small {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --radius-medium {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --radius-xlarge {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --radius-xsmall {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color-text-white {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-weight-bold {
  syntax: "<number>";
  inherits: true;
  initial-value: 600;
}
@property --font-weight-thin {
  syntax: "<number>";
  inherits: true;
  initial-value: 400;
}
@property --text--body--base {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--body--large {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--body--small {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color-icon-neutral {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-input-normal {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-surface-base {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-text-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #222222;
}
@property --font-weight-medium {
  syntax: "<number>";
  inherits: true;
  initial-value: 500;
}
@property --font-weight-normal {
  syntax: "<number>";
  inherits: true;
  initial-value: 450;
}
@property --text--body--xsmall {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--header--base {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color-primary-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #2759cd;
}
@property --color-success-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #1e714a;
}
@property --color-text-tertiary {
  syntax: "<color>";
  inherits: true;
  initial-value: #a6a6a6;
}
@property --font-size-header-xl {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--header--large {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--header--small {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color-border-default {
  syntax: "<color>";
  inherits: true;
  initial-value: #1c1c1c17;
}
@property --color-primary-active {
  syntax: "<color>";
  inherits: true;
  initial-value: #1e50c0;
}
@property --color-primary-normal {
  syntax: "<color>";
  inherits: true;
  initial-value: #3062d4;
}
@property --color-success-active {
  syntax: "<color>";
  inherits: true;
  initial-value: #196742;
}
@property --color-success-normal {
  syntax: "<color>";
  inherits: true;
  initial-value: #1d7c4d;
}
@property --color-surface-raised {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-surface-sunken {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-text-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #5e5e5e;
}
@property --elevation-bottom-100 {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --elevation-bottom-200 {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --elevation-bottom-300 {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --elevation-bottom-400 {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --text--header--xlarge {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color-surface-overlay {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --html-block-link-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --text--header--xxlarge {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--chart--base--c1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-size-header-large {
  syntax: "<custom-ident> | <string>";
  inherits: true;
  initial-value: sans-serif;
}
@property --font-size-header-small {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --font-weight-extra-thin {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --text--header--xxxlarge {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--content--primary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--50 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-input-placeholder {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-line-height-header {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --font-size-header-medium {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--content--tertiary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--50 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--100 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--200 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--300 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--400 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--500 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--600 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--700 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--800 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--900 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey--950 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-background-surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #f7f7f7;
}
@property --font-size-header-display {
  syntax: "<custom-ident> | <string>";
  inherits: true;
  initial-value: sans-serif;
}
@property --color--content--secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--100 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--200 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--300 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--400 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--500 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--600 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--700 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--800 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--900 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--brand--950 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-action-border-focus {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-background-inverted {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-size-paragraph-large {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --font-size-paragraph-small {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color-action-neutral-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-border-default-alpha {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-line-height-paragraph {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --font-size-paragraph-medium {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--chart--indicator--c1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--50 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-action-neutral-active {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-action-neutral-normal {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-text-primary-inverted {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --text--font-size--body--base {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--global--learning--100 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--200 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--300 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--400 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--500 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--600 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--700 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--800 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--900 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--learning--950 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--gradient--dimmer-blue {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --color-surface-sunken-neutral {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --text--font-size--body--large {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--font-size--body--small {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--content--brand-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--50 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--gradient--dimmer-brand {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --text--font-size--body--xlarge {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--font-size--body--xsmall {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--line-height--body--base {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--global--grey-alpha--100 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--200 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--300 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--400 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--500 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--600 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--700 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--800 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--900 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--grey-alpha--950 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--50 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --text--line-height--body--large {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--line-height--body--small {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--content--brand-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--warning-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--100 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--200 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--300 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--400 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--500 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--600 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--700 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--800 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--900 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--global--white-alpha--950 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --text--line-height--body--xlarge {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --text--line-height--body--xsmall {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --color--content--negative-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--positive-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--primary-inverted {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-action-neutral-alpha-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --component--icon-button--bg-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --component--icon-button--fg-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--tertiary-inverted {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--warning-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-action-neutral-alpha-active {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-action-neutral-alpha-normal {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --component--icon-button--bg-active {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --component--icon-button--bg-normal {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --component--icon-button--fg-active {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --component--icon-button--fg-normal {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--negative-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--positive-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--secondary-inverted {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--50-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--informative-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--100-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--200-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--300-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--400-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--500-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--600-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--700-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--800-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property ----color--global--grey-alpha--900-old {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--content--informative-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color--semantic--brand--primary-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff2e50;
}
@property --color--semantic--brand--primary-active {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff2448;
}
@property --color--semantic--brand--primary-normal {
  syntax: "<color>";
  inherits: true;
  initial-value: #FF3C5C;
}

  :host, :root {
  --space-0: 0rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --text-lg: 1.1rem;
  --text-md: 1rem;
  --text-sm: 0.75rem;
  --text-xl: 1.5rem;
  --text-xs: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 12rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
  --space-120: 15rem;
  --text-base: 0.875rem;
  --radius-full: 999rem;
  --radius-large: 1rem;
  --radius-small: 0.5rem;
  --radius-medium: 0.75rem;
  --radius-xlarge: 1.5rem;
  --radius-xsmall: 0.5rem;
  --color-text-white: #ffffff;
  --font-weight-bold: 600;
  --font-weight-thin: 400;
  --text--body--base: clamp(1rem, 0.8980rem + 0.2041vw, 1.125rem);
  --text--body--large: clamp(1.125rem, 1.0231rem + 0.2041vw, 1.25rem);
  --text--body--small: clamp(0.875rem, 0.7731rem + 0.2041vw, 1rem);
  --color-icon-neutral: #484747;
  --color-input-normal: var(--color-text-primary);
  --color-surface-base: #fbfbf9;
  --color-text-primary: #222222;
  --font-weight-medium: 500;
  --font-weight-normal: 450;
  --text--body--xsmall: 0.875rem;
  --text--header--base: clamp(1.25rem, 1.0417rem + 0.4167vw, 1.5rem);
  --color-primary-hover: #2759cd;
  --color-success-hover: #1e714a;
  --color-text-tertiary: #a6a6a6;
  --font-size-header-xl: 3rem;
  --text--header--large: clamp(1.5rem, 1.0833rem + 0.8333vw, 2rem);
  --text--header--small: clamp(1rem, 0.8980rem + 0.2041vw, 1.125rem);
  --color-border-default: #1c1c1c17;
  --color-primary-active: #1e50c0;
  --color-primary-normal: #3062d4;
  --color-success-active: #196742;
  --color-success-normal: #1d7c4d;
  --color-surface-raised: hsl(0, 0%, 100%);
  --color-surface-sunken: hsl(220, 15%, 94%);
  --color-text-secondary: #5e5e5e;
  --elevation-bottom-100: 0 1px 2px 0 rgba(34, 34, 34, 0.12);
  --elevation-bottom-200: 0 2px 2px -1px rgba(34, 34, 34, 0.04), 0 2px 8px -1px rgba(34, 34, 34, 0.08);
  --elevation-bottom-300: 0 2px 2px -1px rgba(34, 34, 34, 0.04), 0 8px 16px -2px rgba(34, 34, 34, 0.12);
  --elevation-bottom-400: 0 2px 2px -1px rgba(34, 34, 34, 0.04),    0 8px 16px -2px rgba(34, 34, 34, 0.12);
  --text--header--xlarge: clamp(1.75rem, 1.2917rem + 0.9167vw, 2.25rem);
  --color-surface-overlay: hsl(0, 0%, 100%);
  --text--header--xxlarge: clamp(2rem, 1.5417rem + 0.9167vw, 2.5rem);
  --color--chart--base--c1: #cccccc;
  --font-size-header-large: 2rem;
  --font-size-header-small:  1.125rem;
  --font-weight-extra-thin: 300;
  --text--header--xxxlarge: clamp(2.5rem, 2.0417rem + 0.9167vw, 3rem);
  --color--content--primary: var(--color--global--grey--900);
  --color--global--grey--50: #fafafa;
  --color-input-placeholder: var(--color-text-secondary);
  --font-line-height-header: 1.2;
  --font-size-header-medium: 1.5rem;
  --color--global--brand--50: #fff0f1;
  --color--global--grey--100: #f5f5f5;
  --color--global--grey--200: #ebebeb;
  --color--global--grey--300: #d3d3d3;
  --color--global--grey--400: #a3a3a3;
  --color--global--grey--500:  hsla(0, 0%, 37%, 1);
  --color--global--grey--600:  hsla(0, 0%, 32%, 1);
  --color--global--grey--700:  hsla(0, 0%, 25%, 1);
  --color--global--grey--800: hsla(0, 0%, 18%, 1);
  --color--global--grey--900:  hsla(0, 0%, 13%, 1);
  --color--global--grey--950: #1a1a1a;
  --color-background-surface: #f7f7f7;
  --font-size-header-display: 4rem;
  --color--content--secondary: var(--color--global--grey--700);
  --color--global--brand--100: #ffe2e5;
  --color--global--brand--200: #ffcad1;
  --color--global--brand--300: #ff9faa;
  --color--global--brand--400: #ff697e;
  --color--global--brand--500: #ff3c5c;
  --color--global--brand--600: #ed113f;
  --color--global--brand--700: #c80836;
  --color--global--brand--800: #a80934;
  --color--global--brand--900: #8f0c33;
  --color--global--brand--950: #500116;
  --color-action-border-focus: #ff526e;
  --color-background-inverted: var(--color--global--grey--800);
  --font-size-paragraph-large:  1.125rem;
  --font-size-paragraph-small: 0.875rem;
  --color-action-neutral-hover: hsla(0, 0%, 25%, 1);
  --color-border-default-alpha: hsla(0, 0%, 11%, 0.09);
  --font-line-height-paragraph: 1.5;
  --font-size-paragraph-medium: 1rem;
  --color--chart--indicator--c1: var(--color--content--brand-primary);
  --color--global--learning--50: #eefff1;
  --color-action-neutral-active: hsla(0, 0%, 18%, 1);
  --color-action-neutral-normal: hsla(0, 0%, 32%, 1);
  --color-text-primary-inverted: #fcfcfc;
  --text--font-size--body--base: 1rem;
  --color--global--learning--100: #d7ffe0;
  --color--global--learning--200: #b2ffc4;
  --color--global--learning--300: #76ff97;
  --color--global--learning--400: #33D666;
  --color--global--learning--500: #00cc33;
  --color--global--learning--600: #00a329;
  --color--global--learning--700: #007a1f;
  --color--global--learning--800: #005214;
  --color--global--learning--900: #00340f;
  --color--global--learning--950: #00290a;
  --color--gradient--dimmer-blue: linear-gradient(to top left, #3c7dff33 0%, #3c7dff0d 100%) scroll border-box padding-box repeat repeat 0% 0% / auto;
  --color-surface-sunken-neutral: #f2f2f2;
  --text--font-size--body--large: 1.25rem;
  --text--font-size--body--small: 0.875rem;
  --color--content--brand-primary: var(--color--global--brand--500);
  --color--global--grey-alpha--50: hsla(0, 0%, 96%, 0.93);
  --color--gradient--dimmer-brand: linear-gradient(to top left, #ff3c5c33 0%, #ff3c5c0d 100%) scroll padding-box border-box repeat repeat 0% 0% / auto;
  --text--font-size--body--xlarge: 1.5rem;
  --text--font-size--body--xsmall: 0.75rem;
  --text--line-height--body--base: 1.5rem;
  --color--global--grey-alpha--100: hsla(0, 0%, 90%, 0.93);
  --color--global--grey-alpha--200: hsla(0, 0%, 80%, 0.93);
  --color--global--grey-alpha--300: hsla(0, 0%, 70%, 0.93);
  --color--global--grey-alpha--400: hsla(0, 0%, 60%, 0.93);
  --color--global--grey-alpha--500: hsla(0, 0%, 50%, 0.93);
  --color--global--grey-alpha--600: hsla(0, 0%, 40%, 0.93);
  --color--global--grey-alpha--700: hsla(0, 0%, 30%, 0.93);
  --color--global--grey-alpha--800: hsla(0, 0%, 20%, 0.93);
  --color--global--grey-alpha--900: hsla(0, 0%, 12%, 0.93);
  --color--global--grey-alpha--950: hsla(0, 0%, 7%, 0.93);
  --color--global--white-alpha--50: hsla(0, 0%, 100%, 0.02);
  --text--line-height--body--large: 1.75rem;
  --text--line-height--body--small: 1.25rem;
  --color--content--brand-secondary: var(--color--global--brand--300);
  --color--global--white-alpha--100: hsla(0, 0%, 100%, 0.04);
  --color--global--white-alpha--200: hsla(0, 0%, 100%, 0.08);
  --color--global--white-alpha--300: hsla(0, 0%, 100%, 0.12);
  --color--global--white-alpha--400: hsla(0, 0%, 100%, 0.16);
  --color--global--white-alpha--500: hsla(0, 0%, 100%, 0.25);
  --color--global--white-alpha--600: hsla(0, 0%, 100%, 0.40);
  --color--global--white-alpha--700: hsla(0, 0%, 100%, 0.55);
  --color--global--white-alpha--800: hsla(0, 0%, 100%, 0.70);
  --color--global--white-alpha--900: hsla(0, 0%, 100%, 0.85);
  --color--global--white-alpha--950:  hsla(0, 0%, 100%, 1);
  --text--line-height--body--xlarge: 2rem;
  --text--line-height--body--xsmall: 1.125rem;
  --color-action-neutral-alpha-hover: hsla(0, 0%, 11%, 0.09);
  --color-action-neutral-alpha-active: hsla(0, 0%, 13%, 0.06);
  --color-action-neutral-alpha-normal: #0000000d;
  ----color--global--grey-alpha--50-old: hsla(0, 0%, 10%, 0.02);
  ----color--global--grey-alpha--100-old: hsla(0, 0%, 10%, 0.05);
  ----color--global--grey-alpha--200-old: hsla(0, 0%, 10%, 0.12);
  ----color--global--grey-alpha--300-old: hsla(0, 0%, 10%, 0.22);
  ----color--global--grey-alpha--400-old: hsla(0, 0%, 10%, 0.38);
  ----color--global--grey-alpha--500-old: hsla(0, 0%, 10%, 0.52);
  ----color--global--grey-alpha--600-old: hsla(0, 0%, 10%, 0.68);
  ----color--global--grey-alpha--700-old: hsla(0, 0%, 10%, 0.82);
  ----color--global--grey-alpha--800-old: hsla(0, 0%, 10%, 0.92);
  ----color--global--grey-alpha--900-old: hsla(0, 0%, 10%, 0.97);
  --color--semantic--brand--primary-hover: var(--color--global--brand--600);
  --color--semantic--brand--primary-active: var(--color--global--brand--700);
  --color--semantic--brand--primary-normal: var(--color--global--brand--500);
}
  @media (prefers-color-scheme: dark) {
      :host, :root {
  --color-text-white: #ffffff;
  --color-icon-neutral: #b8b8b8;
  --color-input-normal: var(--color-text-primary);
  --color-surface-base: #363636;
  --color-text-primary: #fcfcfc;
  --color-text-tertiary: #e3e3e3;
  --color-surface-raised: #4d4d4d;
  --color-surface-sunken: #707070;
  --color-text-secondary: #ebebeb;
  --color-surface-overlay: #404040;
  --color--chart--base--c1: #303030;
  --color--content--primary: var(--color--global--grey--100);
  --color-input-placeholder: var(--color-text-secondary);
  --color--content--secondary: var(--color--global--grey--300);
  --color-action-border-focus: #ff526e;
  --color-background-inverted: var(--color-text-white);
  --color-action-neutral-hover: #d6d6d6;
  --color-border-default-alpha: #ffffff33;
  --color--chart--indicator--c1: var(--color--content--brand-primary);
  --color-action-neutral-active: #cfcfcf;
  --color-action-neutral-normal: #dedede;
  --color-text-primary-inverted: #222222;
  --color-surface-sunken-neutral: #575757;
  --color--content--brand-primary: var(--color--global--brand--500);
  --color--content--brand-secondary: var(--color--global--brand--300);
  --color-action-neutral-alpha-hover: hsla(0, 0%, 100%, 0.12);
  --color-action-neutral-alpha-active: hsla(0, 0%, 100%, 0.08);
  --color-action-neutral-alpha-normal: #ffffff0a;
  ----color--global--grey-alpha--50-old: hsla(0, 0%, 100%, 0.03);
  ----color--global--grey-alpha--100-old: hsla(0, 0%, 100%, 0.07);
  ----color--global--grey-alpha--200-old: hsla(0, 0%, 100%, 0.12);
  ----color--global--grey-alpha--300-old: hsla(0, 0%, 100%, 0.20);
  ----color--global--grey-alpha--400-old: hsla(0, 0%, 100%, 0.30);
  ----color--global--grey-alpha--500-old: hsla(0, 0%, 100%, 0.45);
  ----color--global--grey-alpha--600-old: hsla(0, 0%, 100%, 0.60);
  ----color--global--grey-alpha--700-old: hsla(0, 0%, 100%, 0.75);
  ----color--global--grey-alpha--800-old: hsla(0, 0%, 100%, 0.90);
  ----color--global--grey-alpha--900-old: hsla(0, 0%, 100%, 0.95);
}
    }
  @media (prefers-color-scheme: light) {
      :host, :root {
  --space-0: 0rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --text-lg: 1.1rem;
  --text-md: 1rem;
  --text-sm: 0.75rem;
  --text-xl: 1.5rem;
  --text-xs: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 12rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
  --space-120: 15rem;
  --text-base: 0.875rem;
  --radius-full: 999rem;
  --radius-large: 1rem;
  --radius-small: 0.5rem;
  --radius-medium: 0.75rem;
  --radius-xlarge: 1.5rem;
  --radius-xsmall: 0.5rem;
  --color-text-white: #ffffff;
  --font-weight-bold: 600;
  --font-weight-thin: 400;
  --text--body--base: clamp(1rem, 0.8980rem + 0.2041vw, 1.125rem);
  --text--body--large: clamp(1.125rem, 1.0231rem + 0.2041vw, 1.25rem);
  --text--body--small: clamp(0.875rem, 0.7731rem + 0.2041vw, 1rem);
  --color-icon-neutral: #484747;
  --color-input-normal: var(--color-text-primary);
  --color-surface-base: #fbfbf9;
  --color-text-primary: #222222;
  --font-weight-medium: 500;
  --font-weight-normal: 450;
  --text--body--xsmall: 0.875rem;
  --text--header--base: clamp(1.25rem, 1.0417rem + 0.4167vw, 1.5rem);
  --color-primary-hover: #2759cd;
  --color-success-hover: #1e714a;
  --color-text-tertiary: #a6a6a6;
  --font-size-header-xl: 3rem;
  --text--header--large: clamp(1.5rem, 1.0833rem + 0.8333vw, 2rem);
  --text--header--small: clamp(1rem, 0.8980rem + 0.2041vw, 1.125rem);
  --color-border-default: #1c1c1c17;
  --color-primary-active: #1e50c0;
  --color-primary-normal: #3062d4;
  --color-success-active: #196742;
  --color-success-normal: #1d7c4d;
  --color-surface-raised: hsl(0, 0%, 100%);
  --color-surface-sunken: hsl(220, 15%, 94%);
  --color-text-secondary: #5e5e5e;
  --elevation-bottom-100: 0 1px 2px 0 rgba(34, 34, 34, 0.12);
  --elevation-bottom-200: 0 2px 2px -1px rgba(34, 34, 34, 0.04), 0 2px 8px -1px rgba(34, 34, 34, 0.08);
  --elevation-bottom-300: 0 2px 2px -1px rgba(34, 34, 34, 0.04), 0 8px 16px -2px rgba(34, 34, 34, 0.12);
  --elevation-bottom-400: 0 2px 2px -1px rgba(34, 34, 34, 0.04),    0 8px 16px -2px rgba(34, 34, 34, 0.12);
  --text--header--xlarge: clamp(1.75rem, 1.2917rem + 0.9167vw, 2.25rem);
  --color-surface-overlay: hsl(0, 0%, 100%);
  --text--header--xxlarge: clamp(2rem, 1.5417rem + 0.9167vw, 2.5rem);
  --color--chart--base--c1: #cccccc;
  --font-size-header-large: 2rem;
  --font-size-header-small:  1.125rem;
  --font-weight-extra-thin: 300;
  --text--header--xxxlarge: clamp(2.5rem, 2.0417rem + 0.9167vw, 3rem);
  --color--content--primary: var(--color--global--grey--900);
  --color--global--grey--50: #fafafa;
  --color-input-placeholder: var(--color-text-secondary);
  --font-line-height-header: 1.2;
  --font-size-header-medium: 1.5rem;
  --color--global--brand--50: #fff0f1;
  --color--global--grey--100: #f5f5f5;
  --color--global--grey--200: #ebebeb;
  --color--global--grey--300: #d3d3d3;
  --color--global--grey--400: #a3a3a3;
  --color--global--grey--500:  hsla(0, 0%, 37%, 1);
  --color--global--grey--600:  hsla(0, 0%, 32%, 1);
  --color--global--grey--700:  hsla(0, 0%, 25%, 1);
  --color--global--grey--800: hsla(0, 0%, 18%, 1);
  --color--global--grey--900:  hsla(0, 0%, 13%, 1);
  --color--global--grey--950: #1a1a1a;
  --color-background-surface: #f7f7f7;
  --font-size-header-display: 4rem;
  --color--content--secondary: var(--color--global--grey--700);
  --color--global--brand--100: #ffe2e5;
  --color--global--brand--200: #ffcad1;
  --color--global--brand--300: #ff9faa;
  --color--global--brand--400: #ff697e;
  --color--global--brand--500: #ff3c5c;
  --color--global--brand--600: #ed113f;
  --color--global--brand--700: #c80836;
  --color--global--brand--800: #a80934;
  --color--global--brand--900: #8f0c33;
  --color--global--brand--950: #500116;
  --color-action-border-focus: #ff526e;
  --color-background-inverted: var(--color--global--grey--800);
  --font-size-paragraph-large:  1.125rem;
  --font-size-paragraph-small: 0.875rem;
  --color-action-neutral-hover: hsla(0, 0%, 25%, 1);
  --color-border-default-alpha: hsla(0, 0%, 11%, 0.09);
  --font-line-height-paragraph: 1.5;
  --font-size-paragraph-medium: 1rem;
  --color--chart--indicator--c1: var(--color--content--brand-primary);
  --color--global--learning--50: #eefff1;
  --color-action-neutral-active: hsla(0, 0%, 18%, 1);
  --color-action-neutral-normal: hsla(0, 0%, 32%, 1);
  --color-text-primary-inverted: #fcfcfc;
  --text--font-size--body--base: 1rem;
  --color--global--learning--100: #d7ffe0;
  --color--global--learning--200: #b2ffc4;
  --color--global--learning--300: #76ff97;
  --color--global--learning--400: #33D666;
  --color--global--learning--500: #00cc33;
  --color--global--learning--600: #00a329;
  --color--global--learning--700: #007a1f;
  --color--global--learning--800: #005214;
  --color--global--learning--900: #00340f;
  --color--global--learning--950: #00290a;
  --color--gradient--dimmer-blue: linear-gradient(to top left, #3c7dff33 0%, #3c7dff0d 100%) scroll border-box padding-box repeat repeat 0% 0% / auto;
  --color-surface-sunken-neutral: #f2f2f2;
  --text--font-size--body--large: 1.25rem;
  --text--font-size--body--small: 0.875rem;
  --color--content--brand-primary: var(--color--global--brand--500);
  --color--global--grey-alpha--50: hsla(0, 0%, 96%, 0.93);
  --color--gradient--dimmer-brand: linear-gradient(to top left, #ff3c5c33 0%, #ff3c5c0d 100%) scroll padding-box border-box repeat repeat 0% 0% / auto;
  --text--font-size--body--xlarge: 1.5rem;
  --text--font-size--body--xsmall: 0.75rem;
  --text--line-height--body--base: 1.5rem;
  --color--global--grey-alpha--100: hsla(0, 0%, 90%, 0.93);
  --color--global--grey-alpha--200: hsla(0, 0%, 80%, 0.93);
  --color--global--grey-alpha--300: hsla(0, 0%, 70%, 0.93);
  --color--global--grey-alpha--400: hsla(0, 0%, 60%, 0.93);
  --color--global--grey-alpha--500: hsla(0, 0%, 50%, 0.93);
  --color--global--grey-alpha--600: hsla(0, 0%, 40%, 0.93);
  --color--global--grey-alpha--700: hsla(0, 0%, 30%, 0.93);
  --color--global--grey-alpha--800: hsla(0, 0%, 20%, 0.93);
  --color--global--grey-alpha--900: hsla(0, 0%, 12%, 0.93);
  --color--global--grey-alpha--950: hsla(0, 0%, 7%, 0.93);
  --color--global--white-alpha--50: hsla(0, 0%, 100%, 0.02);
  --text--line-height--body--large: 1.75rem;
  --text--line-height--body--small: 1.25rem;
  --color--content--brand-secondary: var(--color--global--brand--300);
  --color--global--white-alpha--100: hsla(0, 0%, 100%, 0.04);
  --color--global--white-alpha--200: hsla(0, 0%, 100%, 0.08);
  --color--global--white-alpha--300: hsla(0, 0%, 100%, 0.12);
  --color--global--white-alpha--400: hsla(0, 0%, 100%, 0.16);
  --color--global--white-alpha--500: hsla(0, 0%, 100%, 0.25);
  --color--global--white-alpha--600: hsla(0, 0%, 100%, 0.40);
  --color--global--white-alpha--700: hsla(0, 0%, 100%, 0.55);
  --color--global--white-alpha--800: hsla(0, 0%, 100%, 0.70);
  --color--global--white-alpha--900: hsla(0, 0%, 100%, 0.85);
  --color--global--white-alpha--950:  hsla(0, 0%, 100%, 1);
  --text--line-height--body--xlarge: 2rem;
  --text--line-height--body--xsmall: 1.125rem;
  --color-action-neutral-alpha-hover: hsla(0, 0%, 11%, 0.09);
  --color-action-neutral-alpha-active: hsla(0, 0%, 13%, 0.06);
  --color-action-neutral-alpha-normal: #0000000d;
  ----color--global--grey-alpha--50-old: hsla(0, 0%, 10%, 0.02);
  ----color--global--grey-alpha--100-old: hsla(0, 0%, 10%, 0.05);
  ----color--global--grey-alpha--200-old: hsla(0, 0%, 10%, 0.12);
  ----color--global--grey-alpha--300-old: hsla(0, 0%, 10%, 0.22);
  ----color--global--grey-alpha--400-old: hsla(0, 0%, 10%, 0.38);
  ----color--global--grey-alpha--500-old: hsla(0, 0%, 10%, 0.52);
  ----color--global--grey-alpha--600-old: hsla(0, 0%, 10%, 0.68);
  ----color--global--grey-alpha--700-old: hsla(0, 0%, 10%, 0.82);
  ----color--global--grey-alpha--800-old: hsla(0, 0%, 10%, 0.92);
  ----color--global--grey-alpha--900-old: hsla(0, 0%, 10%, 0.97);
  --color--semantic--brand--primary-hover: var(--color--global--brand--600);
  --color--semantic--brand--primary-active: var(--color--global--brand--700);
  --color--semantic--brand--primary-normal: var(--color--global--brand--500);
}
    }
  [data-nc-theme~="adeno-dark"] {
  --color-text-white: #ffffff;
  --color-icon-neutral: #b8b8b8;
  --color-input-normal: var(--color-text-primary);
  --color-surface-base: #363636;
  --color-text-primary: #fcfcfc;
  --color-text-tertiary: #e3e3e3;
  --color-surface-raised: #4d4d4d;
  --color-surface-sunken: #707070;
  --color-text-secondary: #ebebeb;
  --color-surface-overlay: #404040;
  --color--chart--base--c1: #303030;
  --color--content--primary: var(--color--global--grey--100);
  --color-input-placeholder: var(--color-text-secondary);
  --color--content--secondary: var(--color--global--grey--300);
  --color-action-border-focus: #ff526e;
  --color-background-inverted: var(--color-text-white);
  --color-action-neutral-hover: #d6d6d6;
  --color-border-default-alpha: #ffffff33;
  --color--chart--indicator--c1: var(--color--content--brand-primary);
  --color-action-neutral-active: #cfcfcf;
  --color-action-neutral-normal: #dedede;
  --color-text-primary-inverted: #222222;
  --color-surface-sunken-neutral: #575757;
  --color--content--brand-primary: var(--color--global--brand--500);
  --color--content--brand-secondary: var(--color--global--brand--300);
  --color-action-neutral-alpha-hover: hsla(0, 0%, 100%, 0.12);
  --color-action-neutral-alpha-active: hsla(0, 0%, 100%, 0.08);
  --color-action-neutral-alpha-normal: #ffffff0a;
  ----color--global--grey-alpha--50-old: hsla(0, 0%, 100%, 0.03);
  ----color--global--grey-alpha--100-old: hsla(0, 0%, 100%, 0.07);
  ----color--global--grey-alpha--200-old: hsla(0, 0%, 100%, 0.12);
  ----color--global--grey-alpha--300-old: hsla(0, 0%, 100%, 0.20);
  ----color--global--grey-alpha--400-old: hsla(0, 0%, 100%, 0.30);
  ----color--global--grey-alpha--500-old: hsla(0, 0%, 100%, 0.45);
  ----color--global--grey-alpha--600-old: hsla(0, 0%, 100%, 0.60);
  ----color--global--grey-alpha--700-old: hsla(0, 0%, 100%, 0.75);
  ----color--global--grey-alpha--800-old: hsla(0, 0%, 100%, 0.90);
  ----color--global--grey-alpha--900-old: hsla(0, 0%, 100%, 0.95);
}
[data-nc-theme~="adeno-light"] {
  --space-0: 0rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --text-lg: 1.1rem;
  --text-md: 1rem;
  --text-sm: 0.75rem;
  --text-xl: 1.5rem;
  --text-xs: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 12rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
  --space-120: 15rem;
  --text-base: 0.875rem;
  --radius-full: 999rem;
  --radius-large: 1rem;
  --radius-small: 0.5rem;
  --radius-medium: 0.75rem;
  --radius-xlarge: 1.5rem;
  --radius-xsmall: 0.5rem;
  --color-text-white: #ffffff;
  --font-weight-bold: 600;
  --font-weight-thin: 400;
  --text--body--base: clamp(1rem, 0.8980rem + 0.2041vw, 1.125rem);
  --text--body--large: clamp(1.125rem, 1.0231rem + 0.2041vw, 1.25rem);
  --text--body--small: clamp(0.875rem, 0.7731rem + 0.2041vw, 1rem);
  --color-icon-neutral: #484747;
  --color-input-normal: var(--color-text-primary);
  --color-surface-base: #fbfbf9;
  --color-text-primary: #222222;
  --font-weight-medium: 500;
  --font-weight-normal: 450;
  --text--body--xsmall: 0.875rem;
  --text--header--base: clamp(1.25rem, 1.0417rem + 0.4167vw, 1.5rem);
  --color-primary-hover: #2759cd;
  --color-success-hover: #1e714a;
  --color-text-tertiary: #a6a6a6;
  --font-size-header-xl: 3rem;
  --text--header--large: clamp(1.5rem, 1.0833rem + 0.8333vw, 2rem);
  --text--header--small: clamp(1rem, 0.8980rem + 0.2041vw, 1.125rem);
  --color-border-default: #1c1c1c17;
  --color-primary-active: #1e50c0;
  --color-primary-normal: #3062d4;
  --color-success-active: #196742;
  --color-success-normal: #1d7c4d;
  --color-surface-raised: hsl(0, 0%, 100%);
  --color-surface-sunken: hsl(220, 15%, 94%);
  --color-text-secondary: #5e5e5e;
  --elevation-bottom-100: 0 1px 2px 0 rgba(34, 34, 34, 0.12);
  --elevation-bottom-200: 0 2px 2px -1px rgba(34, 34, 34, 0.04), 0 2px 8px -1px rgba(34, 34, 34, 0.08);
  --elevation-bottom-300: 0 2px 2px -1px rgba(34, 34, 34, 0.04), 0 8px 16px -2px rgba(34, 34, 34, 0.12);
  --elevation-bottom-400: 0 2px 2px -1px rgba(34, 34, 34, 0.04),    0 8px 16px -2px rgba(34, 34, 34, 0.12);
  --text--header--xlarge: clamp(1.75rem, 1.2917rem + 0.9167vw, 2.25rem);
  --color-surface-overlay: hsl(0, 0%, 100%);
  --text--header--xxlarge: clamp(2rem, 1.5417rem + 0.9167vw, 2.5rem);
  --color--chart--base--c1: #cccccc;
  --font-size-header-large: 2rem;
  --font-size-header-small:  1.125rem;
  --font-weight-extra-thin: 300;
  --text--header--xxxlarge: clamp(2.5rem, 2.0417rem + 0.9167vw, 3rem);
  --color--content--primary: var(--color--global--grey--900);
  --color--global--grey--50: #fafafa;
  --color-input-placeholder: var(--color-text-secondary);
  --font-line-height-header: 1.2;
  --font-size-header-medium: 1.5rem;
  --color--global--brand--50: #fff0f1;
  --color--global--grey--100: #f5f5f5;
  --color--global--grey--200: #ebebeb;
  --color--global--grey--300: #d3d3d3;
  --color--global--grey--400: #a3a3a3;
  --color--global--grey--500:  hsla(0, 0%, 37%, 1);
  --color--global--grey--600:  hsla(0, 0%, 32%, 1);
  --color--global--grey--700:  hsla(0, 0%, 25%, 1);
  --color--global--grey--800: hsla(0, 0%, 18%, 1);
  --color--global--grey--900:  hsla(0, 0%, 13%, 1);
  --color--global--grey--950: #1a1a1a;
  --color-background-surface: #f7f7f7;
  --font-size-header-display: 4rem;
  --color--content--secondary: var(--color--global--grey--700);
  --color--global--brand--100: #ffe2e5;
  --color--global--brand--200: #ffcad1;
  --color--global--brand--300: #ff9faa;
  --color--global--brand--400: #ff697e;
  --color--global--brand--500: #ff3c5c;
  --color--global--brand--600: #ed113f;
  --color--global--brand--700: #c80836;
  --color--global--brand--800: #a80934;
  --color--global--brand--900: #8f0c33;
  --color--global--brand--950: #500116;
  --color-action-border-focus: #ff526e;
  --color-background-inverted: var(--color--global--grey--800);
  --font-size-paragraph-large:  1.125rem;
  --font-size-paragraph-small: 0.875rem;
  --color-action-neutral-hover: hsla(0, 0%, 25%, 1);
  --color-border-default-alpha: hsla(0, 0%, 11%, 0.09);
  --font-line-height-paragraph: 1.5;
  --font-size-paragraph-medium: 1rem;
  --color--chart--indicator--c1: var(--color--content--brand-primary);
  --color--global--learning--50: #eefff1;
  --color-action-neutral-active: hsla(0, 0%, 18%, 1);
  --color-action-neutral-normal: hsla(0, 0%, 32%, 1);
  --color-text-primary-inverted: #fcfcfc;
  --text--font-size--body--base: 1rem;
  --color--global--learning--100: #d7ffe0;
  --color--global--learning--200: #b2ffc4;
  --color--global--learning--300: #76ff97;
  --color--global--learning--400: #33D666;
  --color--global--learning--500: #00cc33;
  --color--global--learning--600: #00a329;
  --color--global--learning--700: #007a1f;
  --color--global--learning--800: #005214;
  --color--global--learning--900: #00340f;
  --color--global--learning--950: #00290a;
  --color--gradient--dimmer-blue: linear-gradient(to top left, #3c7dff33 0%, #3c7dff0d 100%) scroll border-box padding-box repeat repeat 0% 0% / auto;
  --color-surface-sunken-neutral: #f2f2f2;
  --text--font-size--body--large: 1.25rem;
  --text--font-size--body--small: 0.875rem;
  --color--content--brand-primary: var(--color--global--brand--500);
  --color--global--grey-alpha--50: hsla(0, 0%, 96%, 0.93);
  --color--gradient--dimmer-brand: linear-gradient(to top left, #ff3c5c33 0%, #ff3c5c0d 100%) scroll padding-box border-box repeat repeat 0% 0% / auto;
  --text--font-size--body--xlarge: 1.5rem;
  --text--font-size--body--xsmall: 0.75rem;
  --text--line-height--body--base: 1.5rem;
  --color--global--grey-alpha--100: hsla(0, 0%, 90%, 0.93);
  --color--global--grey-alpha--200: hsla(0, 0%, 80%, 0.93);
  --color--global--grey-alpha--300: hsla(0, 0%, 70%, 0.93);
  --color--global--grey-alpha--400: hsla(0, 0%, 60%, 0.93);
  --color--global--grey-alpha--500: hsla(0, 0%, 50%, 0.93);
  --color--global--grey-alpha--600: hsla(0, 0%, 40%, 0.93);
  --color--global--grey-alpha--700: hsla(0, 0%, 30%, 0.93);
  --color--global--grey-alpha--800: hsla(0, 0%, 20%, 0.93);
  --color--global--grey-alpha--900: hsla(0, 0%, 12%, 0.93);
  --color--global--grey-alpha--950: hsla(0, 0%, 7%, 0.93);
  --color--global--white-alpha--50: hsla(0, 0%, 100%, 0.02);
  --text--line-height--body--large: 1.75rem;
  --text--line-height--body--small: 1.25rem;
  --color--content--brand-secondary: var(--color--global--brand--300);
  --color--global--white-alpha--100: hsla(0, 0%, 100%, 0.04);
  --color--global--white-alpha--200: hsla(0, 0%, 100%, 0.08);
  --color--global--white-alpha--300: hsla(0, 0%, 100%, 0.12);
  --color--global--white-alpha--400: hsla(0, 0%, 100%, 0.16);
  --color--global--white-alpha--500: hsla(0, 0%, 100%, 0.25);
  --color--global--white-alpha--600: hsla(0, 0%, 100%, 0.40);
  --color--global--white-alpha--700: hsla(0, 0%, 100%, 0.55);
  --color--global--white-alpha--800: hsla(0, 0%, 100%, 0.70);
  --color--global--white-alpha--900: hsla(0, 0%, 100%, 0.85);
  --color--global--white-alpha--950:  hsla(0, 0%, 100%, 1);
  --text--line-height--body--xlarge: 2rem;
  --text--line-height--body--xsmall: 1.125rem;
  --color-action-neutral-alpha-hover: hsla(0, 0%, 11%, 0.09);
  --color-action-neutral-alpha-active: hsla(0, 0%, 13%, 0.06);
  --color-action-neutral-alpha-normal: #0000000d;
  ----color--global--grey-alpha--50-old: hsla(0, 0%, 10%, 0.02);
  ----color--global--grey-alpha--100-old: hsla(0, 0%, 10%, 0.05);
  ----color--global--grey-alpha--200-old: hsla(0, 0%, 10%, 0.12);
  ----color--global--grey-alpha--300-old: hsla(0, 0%, 10%, 0.22);
  ----color--global--grey-alpha--400-old: hsla(0, 0%, 10%, 0.38);
  ----color--global--grey-alpha--500-old: hsla(0, 0%, 10%, 0.52);
  ----color--global--grey-alpha--600-old: hsla(0, 0%, 10%, 0.68);
  ----color--global--grey-alpha--700-old: hsla(0, 0%, 10%, 0.82);
  ----color--global--grey-alpha--800-old: hsla(0, 0%, 10%, 0.92);
  ----color--global--grey-alpha--900-old: hsla(0, 0%, 10%, 0.97);
  --color--semantic--brand--primary-hover: var(--color--global--brand--600);
  --color--semantic--brand--primary-active: var(--color--global--brand--700);
  --color--semantic--brand--primary-normal: var(--color--global--brand--500);
}
[data-nc-theme~="adeno-learning-dark"] {
  --color-text-white: #ffffff;
  --color-icon-neutral: #b8b8b8;
  --color-input-normal: var(--color-text-primary);
  --color-surface-base: #030B03;
  --color-text-primary: #fcfcfc;
  --color-text-tertiary: #bdbdbd;
  --color-border-default: #FFFFFF;
  --color-surface-raised: #040F04;
  --color-text-secondary: #ebebeb;
  --color-surface-overlay: #051306;
  --color--chart--base--c1: #0e1b0e;
  --color-input-placeholder: var(--color-text-secondary);
  --color-action-border-focus: var(--color--global--learning--400);
  --color-action-neutral-hover: #d6d6d6;
  --color-border-default-alpha: var(--color--global--white-alpha--800);
  --color--chart--indicator--c1: var(--color--content--brand-primary);
  --color-action-neutral-active: #cfcfcf;
  --color-action-neutral-normal: #dedede;
  --color-surface-sunken-neutral: #051306;
  --color--content--brand-primary: var(--color--global--learning--500);
  --color--content--brand-secondary: var(--color--global--learning--300);
  --color-action-neutral-alpha-hover: hsla(0, 0%, 100%, 0.12);
  --color-action-neutral-alpha-active: hsla(0, 0%, 100%, 0.08);
  --color-action-neutral-alpha-normal: #ffffff0a;
  --color--semantic--brand--primary-hover: var(--color--global--learning--600);
  --color--semantic--brand--primary-active: var(--color--global--learning--700);
  --color--semantic--brand--primary-normal: var(--color--global--learning--500);
}
[data-nc-theme~="adeno-learning-light"] {
  --color-text-white: #ffffff;
  --color-icon-neutral: #b8b8b8;
  --color-input-normal: var(--color-text-primary);
  --color-surface-base: hsl(220, 15%, 98%);
  --color-text-primary: #222222;
  --color-text-tertiary: #a6a6a6;
  --color-border-default: #FFFFFF;
  --color-surface-raised: hsl(0, 0%, 100%);
  --color-text-secondary: #5e5e5e;
  --color-surface-overlay: hsl(0, 0%, 100%);
  --color--chart--base--c1: #cccccc;
  --color-input-placeholder: var(--color-text-secondary);
  --color-action-border-focus: var(--color--global--learning--400);
  --color-border-default-alpha: var(--color--global--grey-alpha--100);
  --color--chart--indicator--c1: var(--color--content--brand-primary);
  --color-surface-sunken-neutral: #f2f2f2;
  --color--content--brand-primary: var(--color--global--learning--500);
  --color--content--brand-secondary: var(--color--global--learning--300);
  --color--semantic--brand--primary-hover: var(--color--global--learning--600);
  --color--semantic--brand--primary-active: var(--color--global--learning--700);
  --color--semantic--brand--primary-normal: var(--color--global--learning--500);
}
    


@layer base {
  
  body, :host {
    /* Color */
    
    /* Fonts */
    --font-inter: 'Inter',sans-serif;
--font-Inter Tight: 'Inter Tight',sans-serif;
--font-Poppins: 'Poppins',sans-serif;
--font-Raleway: 'Raleway',sans-serif;
--font-Black And White Picture: 'Black And White Picture',display;

    /* Font size */
    
    /* Font weight */
    
    /* Shadows */
    
    /* Border radius */
    
    /* Spacing */
    
    /* Z-index */
    
  }
  @keyframes animation-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes animation-fade-in {
    from {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }
  @keyframes animation-fade-out {
    from {
      opacity:1;
    }
    to {
      opacity:0;
    }
  }
}


    .LNQWk {
      flex:1;
      display:flex;
      flex-direction:column;
    }

    .bUXsgP {
      color:#9f1e8d;
    }

    .dApaGJ {
      height:100%;
    }

    .eyVPLS {
      font-size:inherit;
      font-family:inherit;
      font-weight:inherit;
    }

    .eZNDum {
      width:100%;
      display:flex;
      row-gap:24px;
      max-width:1240px;
      column-gap:24px;
      align-items:flex-start;
      margin-left:auto;
      padding-top:var(--space-40);
      margin-right:auto;
      padding-left:var(--space-0);
      padding-right:var(--space-0);
      flex-direction:column;
      padding-bottom:var(--space-40);
      justify-content:flex-start;
    }

    .adeno-layout-section\:root {
      width:inherit;
      height:inherit;
      display:flex;
      background:var(--color-surface-base);
      padding-top:64px;
      padding-left:40px;
      padding-right:40px;
      padding-bottom:64px;
    }

    @media (max-width: 960px) {

    .adeno-layout-section\:root {
      padding-top:24px;
      padding-left:24px;
      padding-right:24px;
      padding-bottom:24px;
    }
    }